<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>安昇租车-南京及周边城市租车最低价！！</title>
    <link rel="dns-prefetch" href="http://ashlybus.com/m/test">
    <meta name="description" content="安昇租车-提供5~63座配驾租车服务,承接南京及周边城市旅游租车、会议接送、商务接待、婚庆租车、机场接送、团体租车、企业班车。Tel:18120116637（兼微信）">
    <meta name="keywords" content="南京租车,安昇,安昇租车,租车,租车网,租车公司,汽车租赁,租车价格,旅游租车,婚庆租车,商务租车,企业租车,包车,租车手续">
    <script src="../js/flexible.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/other.css">
    <style>
        .modal-mask {
            position: fixed;
            z-index: 9998;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .5);
            display: table;
            transition: opacity .3s ease;
        }
        .modal-wrapper {
            display: table-cell;
            vertical-align: middle;
        }
        .modal-container {
            width: 300px;
            margin: 0px auto;
            padding: 20px 30px;
            background-color: #fff;
            border-radius: 2px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
            transition: all .3s ease;
            font-family: Helvetica, Arial, sans-serif;
        }
        .modal-enter {
            opacity: 0;
        }
        .modal-leave-active {
            opacity: 0;
        }
        .modal-enter .modal-container,
        .modal-leave-active .modal-container {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div id="app">
        <!--header组件-->
        <h></h>
        <!--title组件-->
        <t></t>
        <!--搜索组件-->
        <search></search>
        <!--container组件-->
            <!--page子组件-->
        <!--footer组件-->
        <f></f>
    </div>
    <!--header组件-->
    <script type="text/x-templte" id="header-template">
        <header>
            <img src="http://ashlybus.com/m/img/logo_2.png" class="logo_2">
            <img src="http://ashlybus.com/m/img/logo_1.png" class="logo_1">
            <a class="tel tel_href" data-i="T">
                <i></i>
            </a>
        </header>
    </script>
    <!--footer组件-->
    <script type="text/x-templte" id="footer-template">
        <footer>
            <a class="tel_href" data-i="B">
                <i class="tel"></i>
                <div>
                    <h2>租车咨询</h2>
                    <h2>18120116637</h2>
                </div>
            </a>
            <a href="http://p.qiao.baidu.com/cps2/chatIndex?reqParam=%7B%22from%22%3A0%2C%22sessionid%22%3A%22-100%22%2C%22siteId%22%3A%2210082988%22%2C%22tid%22%3A%22-1%22%2C%22userId%22%3A%2222534827%22%2C%22ttype%22%3A1%7D">
                <i class="zx"></i>
                <span class="zx_t">在线咨询</span>
            </a>
            <a>
                <i class="wx" @click="wxShow=!wxShow"></i>
            </a>
            <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=310634955&amp;site=qq&amp;menu=yes" title="点击QQ咨询">
                <i class="qq"></i>
            </a>
            <i class="tel_t"></i>
            <div class="wx_box" v-show="wxShow">
                <i></i>
            </div>
        </footer>
    </script>
    <!--title组件-->
    <script type="text/x-templte" id="title-template">
        <div class="title">
            <a href="javascript:history.back(-1);" class="back"></a>
            <h2 v-html="title"></h2>
            <a href="../index.html" class="index">首页</a>
        </div>
    </script>
    <!--search父组件-->
    <script type="text/x-template" id="search-template">
        <div id="search">
            <div class="search_box">
                <div class="select">
                    <div>选择车型</div>
                    <div  @click="showSeats=true">
                        <span v-html="car_title" :value="car_seat" class="span1">全部</span>
                        <i class="arrow_drop">&nbsp;</i>
                    </div>
                </div>
                <div class="search">
                    <i>&nbsp;</i>
                    <div>搜索选车</div>
                </div>
            </div>
            <seats v-if="showSeats" @close="showSeats=false" @pick="listenPicked"></seats>
        </div>
    </script>
    <!--search子组件-->
    <script type="text/x-template" id="seats-template">
        <transition name="modal">
            <div class="modal-mask">
                <div class="modal-wrapper">
                    <div class="modal-container">
                        <div class="modal-header">
                            <!--<h3>选择车型</h3>-->
                            <i class="close" @click="$emit('close')"></i>
                        </div>
                        <div class="modal-body">
                            <label v-for="seat in car_seats">
                                <input type="radio"  name="car" :value="seat.car_seat" @click="select">
                                <span>{{seat.car_title}}</span>
                            </label>
                        </div>
                        <div class="modal-footer">
                            <a class="btn" @click="$emit('close')">确定</a>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
    </script>
    <script>
        //    header组件
        Vue.component('h',{
            template:"#header-template"
        });
        //    footer组件
        Vue.component('f',{
            template:"#footer-template",
            data:function(){
                return{
                    wxShow:false
                }
            }
        });
        //    title组件
        Vue.component('t',{
            template:"#title-template",
            data:function(){
                return{
                    title:"搜索结果"
                }
            }
        });
        //    子组件
        Vue.component('seats',{
            template:"#seats-template",
            data:function(){
                return{
                    car_seats:{}
                }
            },
            created:function(){
                this.getData();
            },
            methods:{
                getData:function(){
                    console.log("getdata");
                    var _self=this;
                    $.ajax({
                        type:"GET",
                        dataType:"json",
                        data:{
                            "orderID":1
                        },
                        //绝对定位
                        url:"http://ashlybus.com/m/data/search_.php",
                        success:function(data, textStatus, jqXHR){
                            _self.car_seats=data.car_seats;
                            console.log(data);
                        },
                        error:function(XMLHttpRequest, textStatus, errorThrown){
                            console.log(XMLHttpRequest, textStatus, errorThrown);
                        }
                    })
                },
                select:function(){
                    var checked=$(":radio:checked");
                    checked.parent().addClass("inputS")
                            .siblings().removeClass("inputS");
                    this.$emit('pick', checked.next().html(), $(":radio:checked").val());
                }
            }
        });
        //    父组件
        Vue.component('search',{
            template:"#search-template",
            data:function(){
                return{
                    showSeats:false,
                    car_seat:'',
                    car_title:'全部'
                }
            },
            methods:{
                listenPicked:function(car_title,car_seat){
                    console.log(car_title,car_seat);
                    this.car_title=car_title;
                    this.car_seat=car_seat;
                }
            }
        });
    </script>
<script>
    window.onload=function(){
        //imgcss,750/530
        var w=.4*parseFloat($("body").css("width"));
        $(".carlist li a img").css("height",53/75*w+"px");
    };
    var app=new Vue({
        el:"#app",
        data:{
        },
        methods:{
        }
    });

</script>
</body>
</html>